<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul v-for="todo in todos">
				<li>{{todo.tex}}</li>
			</ul>
			<p>上下两个是不一样的实现方法</p>
			<ol>
				<!--<todo-item v-for="item in todos" v-bind:todo="item"></todo-item>-->
				<li is='todo-item' v-for='(item,index) in todos' :item='item' v-on:remove="removes"></li>
			</ol>
			<ul>
				<study-item v-for="item in goodstudy" v-bind:study="item"></study-item>
			</ul>
			
			<button-btn></button-btn>
			
			<custom-input v-model="searchText"></custom-input>
			
			<custom-input v-model="searchs"></custom-input>
			
		</div>
		
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		Vue.component('button-btn',{
			data:function(){
				return {
					count:0
				}
			},
			template:'<button v-on:click="count++">{{count}}点击加1</button>'
		})
		
		Vue.component('custom-input',{
			props:['value'],
			template:'<input v-bind:value="value" v-on:input="$emit(\'input\',$event.target.value)">'
			
		})
		
		
		
		Vue.component('todo-item',{
			props:['item'],
			template:'<li>{{item.tex}}<button v-on:click="$emit(\'remove\')">删除</button></li>'
		})
		Vue.component('study-item',{
			props:['study'],
			template:'<li>{{study.stu}}</li>'
		})
		
		var vm = new Vue({
			el:'#app',
			data:{
				todos:[
				{tex:'学习一次vue'},
				{tex:'学习两次vue'},
				{tex:'学习三次vue'},
				],
				goodstudy:[
				{id:1,stu:'学习中文'},
				{id:2,stu:'学习英文'},
				{id:3,stu:'学习日语'},
				{id:4,stu:'学习更多语言'}
				],
				searchText:'',
				searchs:'yklj'
			},
			methods:{
				removes:function(){
					alert('按钮有效')
					//return this.todos.splice(1,1)
				}
			},
			beforeCreate:function(){
				console.log('实例还没创建出来呢'+this.todos)
			},
			created:function(){
				console.log('实例创建出来了'+this.todos)
			},
			beforeMount:function(){},
			mounted:function(){},
			beforeUpdate:function(){},
			updated:function(){},
			beforeDestroy:function(){},
			destroyed:function(){}
		})
		
		console.log(vm.$el === document.getElementById('app'))
		
	</script>
</html>
